<template>
    <div>
        <Modal v-model="isShowModal" title="签到记录" @on-cancel="hide" :mask-closable="false" width="900">


            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading"></Table>
            <!--分页-->
            <div class="hs-page">
                <Page :total="total" show-sizer show-total transfer @on-change="changePage"
                      @on-page-size-change="changePageSize"/>
            </div>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide">取消</Button>
                <Button type="primary" @click="hide">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                total: 0,
                isTableLoading: false,
                isShowModal: false,
                params: {
                    page: 1,
                    rows: 10,
                    username: '',
                    nickName: '',
                    startTime: '',
                    endTime: ''
                },
                // 表格列
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        minWidth: 120,
                        key: 'userSignInRecordId'
                    },
                    {
                        title: '昵称',
                        minWidth: 120,
                        key: 'nickName'
                    },
                    {
                        title: '每次领取',
                        minWidth: 120,
                        key: 'receiveNum'
                    },
                    {
                        title: '领取次数',
                        minWidth: 120,
                        key: 'receiveCountTotal'
                    },
                    {
                        title: '领取数量',
                        minWidth: 120,
                        key: 'receiveNumTotal'
                    },
                    {
                        title: '签到时间',
                        key: 'signInTime',
                        width: 150
                    }
                ],
                // 表格数据
                data: [],
            }
        },
        methods: {
            // 签到设置-签到记录查询
            findUserSignInList() {
                this.isTableLoading = true;
                this.axios.post('/userSignIn/findUserSignInList', this.params).then(res => {
                    console.log(res);
                    this.isTableLoading = false;
                    if (res.status == 200) {
                        this.total = res.data.total;
                        this.data = res.data.rows;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询签到记录列表接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 显示模态框
            show() {
                this.isShowModal = true;
                // 签到设置-签到记录查询
                this.findUserSignInList();
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            },
            // 改变页数
            changePage(e) {
                this.params.page = e;
                // 签到设置-签到记录查询
                this.findUserSignInList();
            },
            // 改变页容量
            changePageSize(e) {
                this.params.rows = e;
                // 签到设置-签到记录查询
                this.findUserSignInList();
            }
        }
    }
</script>

<style scoped>

</style>